(function () {
    $.fn.extend({
        seclectGame() {
            this.find("input").focus(function () {
                $(this).addClass("sec")
            }).blur(function () {
                $(this).removeClass("sec")
            })
        }
    })
})()

$(function () {
    //点击搜索框改变边框样式
    $(".searchBox").seclectGame()

    //移入移出,内容移动
    $(".upBox").find("li").mouseenter(function () {
        $(this).find("a").stop().animate({
            left: "30px"
        }, 500)
    }).mouseleave(function () {
        $(this).find("a").stop().animate({
            left: "20px"
        }, 500)
    })

    //登录完成修改登录信息
    let userdata = JSON.parse(localStorage.getItem("userInfo") || '{}')
    $("#navLogin").find("span").html(`
            <span>欢迎你,${userdata.uname}<a class="logout" href="JavaScript:void(0)">退出</a></span>
        `)
    $(".loginBox").find("span").html(`
            <span>您已登录${userdata.uname},可以选择你喜欢的商品了!</span>
        `)
    // 退出登录
    $(".right-nav").on("click", ".logout", function () {
        localStorage.removeItem("userInfo");
        $("#navLogin").find("span").html(`
        <span>你还未登录,请<a class="login" href="./login.html">登录</a></span>
        `)
        $(".loginBox").find("span").html(`
    <span>您还未登录哦，<a class="login" href="./login.html">立即登录</a>购买超值商品！</span>
        `)
    })

    //动态渲染主页商品数据

    $.ajax({
        url: "http://127.0.0.1:8080/api/prods",
    }).done(function (res) {
        let strHtml = ``
        let {
            data
        } = res;
        data.forEach((el, index) => {
            strHtml += `
            <div class="box">
                <a href="./list.html?pid=${el.pid}"><img src="${el.img}" alt=""></a>
                <div class="cInfo">
                    <p>
                        <span>【${el.gemaname}】<a href="./list.html?pid=${el.pid}">${el.pname}</a></span>
                    </p>
                    <p>
                        Q币价：<span class="qb">${el.pprice}QB</span>
                    </p>
                    <p>
                        热卖推荐
                    </p>
                    <button onclick="window.location.href ='./list.html?pid=${el.pid}'">立即抢购</button>
                </div>
            </div>`
        });
        $(".commodity").html(strHtml);
    })

    let res = JSON.parse(localStorage.getItem("userInfo") || '{}')
    $.ajax({
        url: `http://127.0.0.1:8080/api/cartList?uId=${res.uId}`,
        type: "get"
    }).then(function (res) {
        let strHtml = ``;
        let num = res.data.map(el => {
            strHtml += `
            <tr>
                <td>${el.gamename}</td>
                <td>${el.pName}</td>
                <td>${el.pPrice}</td>
                <td class="shu">${el.pNumber}</td>
            </tr>
        `
            $("#tbody").html(strHtml)
            return el.pNumber;
        });
        //购物车显示数量
        let sum = 0;
        for (let i = 0; i < num.length; i++) {
            $("#num").text(sum += Number(num[i]));
        }
    })

})